<template>
  <div class="app-container details">
    <!-- 头 -->
    <el-card class="header">
      <svg-icon icon-class="order2" class-name="icon inline-block" />
      <h1 class="title inline-block">
        销售订单 {{ soDetails.objectNo }}
      </h1>
      <div v-if="titleConfig && titleConfig.length" class="info">
        <ul>
          <li
            v-for="(item, index) in titleConfig"
            :key="index"
            class="col"
          >
            <div class="item">
              <div class="label ellipsis">
                <span>{{ item.name }}</span>
              </div>
              <div class="value ellipsis">
                <span>{{ format(item) }}</span>
              </div>
            </div>
          </li>
        </ul>
      </div>

      <div class="menu">
        <!-- <el-button class="mr10" size="small" type="primary" @click.stop="back">返回</el-button> -->
        <el-dropdown
          size="small"
          split-button
          type="primary"
          v-if="validActionConfigs().length>0"
          @click.stop="menuCommand(validActionConfigs()[0].command)"
          @command="menuCommand"
        >
          {{validActionConfigs()[0].name}}
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item
              v-for="(item, index) in validActionConfigs().slice(1)"
              :key="index"
              :command="item.command"
            >
              <el-upload
                v-if="item.upload"
                ref="fieldUpload"
                class="upload-demo mr10 inline-block"
                :headers="uploadHeaders"
                :action="item.upload(soDetails).action"
                :data="item.upload(soDetails).data"
                :auto-upload="true"
                :show-file-list="false"
                :on-change="importHandler"
                :before-upload="(file) => { return beforeUpload(file, item.upload(soDetails).fileType, item.upload(soDetails).fileSize) }"
                :on-success="uploadSuccess"
                :on-error="uploadError"
              >
                <span>{{ item.name }}</span>
              </el-upload>
              <span v-else>{{ item.name }}</span>
            </el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </el-card>

    <div class="main mt10">
      <el-tabs v-model="activeName" type="card" @tab-click="tabChange">
        <el-tab-pane
          v-for="tab in tabsList"
          :key="tab.value"
          :label="tab.label"
          :name="tab.value"
        >
          <div v-if="tab.value === 'Details'">
            <el-collapse v-model="activeCollapse" @change="collapseChange">
              <el-collapse-item
                v-for="collapse in collapseList"
                :key="collapse.name"
                :title="collapse.title"
                :name="collapse.name"
              >
                <div v-if="collapse.name === 'items'">
                  <transition name="el-zoom-in-bottom">
                    <div class="tool-wrap mb10">
                      <span class="count ml10 mr10">已选中 {{ (soDetails.orderLines && soDetails.orderLines.filter(item => item.isSelected).length) || 0 }} 项</span>
                      <el-divider direction="vertical"></el-divider>
                      <div v-if="selectConfig && selectConfig.length">
                        <el-button
                          v-for="(item, index) in selectConfig"
                          :key="index"
                          :icon="item.icon"
                          size="small"
                          type="primary"
                          @click.stop="selectHandler(item)"
                        >{{ item.name }}</el-button>
                        <!-- <span class="close-btn fr mr10" @click.stop="selectCloseHandler">
                          <i class="el-icon-close" />
                        </span> -->
                      </div>
                    </div>
                  </transition>

<!--                  <ExtHotTable ref="orderTable"-->
<!--                               :lines="soDetails.orderLines"-->
<!--                               :headers="headers && headers.filter(item => item.isShow)"-->
<!--                               :lineManager="soDetails"-->
<!--                               :contextMenuItems="contextMenuItems"-->
<!--                               :hottableRefreshkey="hottableRefreshkey"-->
<!--                               :allowCreateRow="allowCreateRow"-->
<!--                               @onContextMenuClick="contextMenuHandler"-->
<!--                               @onCellClick="onCellClick"-->
<!--                               @onAfterChange="afterChangeHandle"-->
<!--                               @beforeContextMenuSetItems="beforeContextMenuSetItems"-->
<!--                  />-->

                </div>

                <div v-else>
                  <el-form
                    :key="`editor_${collapse.name}`"
                    :inline="true"
                    label-position="left"
                    @submit.native.prevent
                  >
                    <el-form-item
                      v-for="(item, index) in (editConfigV2[collapse.name]||[]).filter(item=>soDetails.isShow(item))"
                      :key="index"
                      :label="item.name"
                      :class="item.isEditable ? 'isEditable' : ''"
                      @mouseleave.stop="resetHandler(item, collapse.name)"
                    >
                      <div class="required">
                        <span v-if="item.isRequired" class="red">*</span>
                      </div>
                      <div ref="editor" class="edit-item" @mouseenter.stop="editFieldHandler(item, collapse.name, index)">
                        <div v-if="item.isEdit">
                          <!-- input 输入框 -->
                          <el-input
                            v-if="item.editType === 'input'"
                            v-model="soDetails[item.field]"
                            :class="item[item.editType].class ? item[item.editType].class : 'w260'"
                            :type="item.input.type"
                            size="small"
                            placeholder="请输入"
                            :autosize="item.input.autosize"
                            :maxLength="item[item.editType].maxLength"
                            @keyup.enter.native="inputChange(item, collapse.name, index)"
                          />
                          <!-- fromToInput 区间输入框 -->
                          <div v-else-if="item.editType === 'fromToInput'">
                            <el-input
                              v-model="soDetails[item.fieldFrom]"
                              :class="item[item.editType].class ? item[item.editType].class : 'w120'"
                              :type="item[item.editType].type"
                              size="small"
                              placeholder="请输入"
                              :autosize="item[item.editType].autosize"
                              :maxLength="item[item.editType].maxLength"
                              @keyup.enter.native="inputChange(item, collapse.name, index)"
                            /> -
                            <el-input
                              v-model="soDetails[item.fieldTo]"
                              :class="item[item.editType].class ? item[item.editType].class : 'w120'"
                              :type="item[item.editType].type"
                              size="small"
                              placeholder="请输入"
                              :autosize="item[item.editType].autosize"
                              :maxLength="item[item.editType].maxLength"
                              @keyup.enter.native="inputChange(item, collapse.name, index)"
                            />
                          </div>
                          <!-- select 下拉框 -->
                          <el-select
                            v-else-if="item.editType === 'select'"
                            v-model="soDetails[item.field]"
                            class="select_single w180"
                            size="small"
                            placeholder="（空）"
                            :filterable="item.select.filterable"
                            :filter-method="(val) => { return filterMethod(val, item) } "
                            :popper-append-to-body="false"
                            @change="selectChange($event, item)"
                            @visible-change="selectVisibleChange($event,item)"
                          >
                            <el-option key label="（空）" value />
                            <el-option
                              v-for="(element, index) in item.select.list.data"
                              :key="`${item.name}_${element[item.select.value]}_${index}`"
                              :label="element[item.select.label]"
                              :value="element[item.select.value]"
                              :disabled="element.disabled"
                            />
                          </el-select>
                          <!-- datePicker 日期选择器 -->
                          <el-date-picker
                            v-else-if="item.editType === 'date'"
                            v-model="soDetails[item.field]"
                            class="w180"
                            size="small"
                            type="datetime"
                            format="yyyy-MM-dd"
                            placeholder="选择日期"
                          />
                          <!-- dateRangePicker 日期范围选择器 -->
                          <el-date-picker
                            v-else-if="item.editType === 'dateRange'"
                            v-model="soDetails[item.field]"
                            size="small"
                            unlink-panels
                            type="datetimerange"
                            format="yyyy-MM-dd"
                            range-separator="至"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期"
                            @change="dateRangeChange"
                          />
                          <!-- checkbox 多选框 -->
                          <el-checkbox
                            v-else-if="item.editType === 'checkbox'"
                            v-model="soDetails[item.field]"
                            @change="checkboxChange"
                          />
                          <!-- upload 上传 -->
                          <div v-else-if="item.editType === 'uploadFile'">
                            <el-upload
                              :headers="uploadHeaders"
                              :action="item[item.editType].action"
                              :data="item[item.editType].data(soDetails)"
                              :list-type="item[item.editType].listType"
                              :auto-upload="item[item.editType].autoUpload"
                              :show-file-list="item[item.editType].showFile"
                              :multiple="item[item.editType].multiple"
                              :file-list="item[item.editType].uploadFileList"
                              :before-upload="(file) => { return beforeUpload(file, item[item.editType].fileType, item[item.editType].fileSize) }"
                              :on-change="(file, fileList) => { return uploadFileHandler(file, fileList, item.field) }">
                              <i slot="default" class="el-icon-plus"></i>
                              <div v-if="['picture-card'].includes(item[item.editType].listType)" style="width: 100%; height: 100%;" slot="file" slot-scope="{file}">
                                <img style="width: 100%; height: 100%;" class="el-upload-list__item-thumbnail" :src="['jpg', 'jpeg', 'png', 'gif'].includes(file.fileName.split('.')[1]) ? file.url : require('@/assets/image/folder.png')" :alt="file.fileName">
                                <span class="el-upload-list__item-actions">
                                  <span v-if="['jpg', 'jpeg', 'png', 'gif'].includes(file.fileName.split('.')[1])" class="el-upload-list__item-preview" @click="pictureCardPreviewHandler(file)">
                                    <i class="el-icon-zoom-in"></i>
                                    </span>
                                    <span v-if="item[item.editType].downloadDisabled" class="el-upload-list__item-delete" @click="downloadUploadFileHandler(file)">
                                      <i class="el-icon-download"></i>
                                    </span>
                                    <span v-if="item[item.editType].removeDisabled" class="el-upload-list__item-delete" @click="removeUploadFileHandler(file, item.field)">
                                      <i class="el-icon-delete"></i>
                                    </span>
                                  </span>
                              </div>
                            </el-upload>
                            <el-dialog :visible.sync="previewImgDialogVisible">
                              <img width="100%" :src="previewImgUrl" alt="">
                            </el-dialog>
                          </div>
                        </div>
                        <div v-else>
                          <div v-if="item.editType === 'select'">
                            <el-link
                              v-if="item.isLink"
                              type="primary"
                              :underline="false"
                              @click.stop="linkHandler(item)"
                            >{{ format(item) }}</el-link>
                            <p v-else>{{ format(item) }}</p>
                          </div>
                          <div v-else-if="item.editType === 'checkbox'">
                            <p>{{ soDetails[item.field] === true ? '是' : (soDetails[item.field] === false ? '否' : '') }}</p>
                          </div>
                          <div v-else>
                            <el-link
                              v-if="item.isLink"
                              :class="item.class"
                              type="primary"
                              :underline="false"
                              @click.stop="linkHandler(item)"
                            >{{ soDetails.format(item.field, item.format) }}</el-link>
                            <p :class="item.class" v-else>{{ soDetails.format(item.field, item.format) }}</p>
                          </div>
                        </div>
                        <i class="icon el-icon-edit" />
                      </div>
                    </el-form-item>
                  </el-form>
                </div>
              </el-collapse-item>
            </el-collapse>
          </div>

          <div v-if="tab.value === 'Relation'">
            <!-- <div class="section">
              <h3 class="subtitle">
                相关信息
                <svg-icon icon-class="arrowDown" class-name="menu-icon ml5" />
              </h3>
            </div> -->
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>

    <!-- 底部栏 -->
    <div class="fixed-wrap">
      <div class="content-wrap t_right">
        <div class="left-group clearfix">
          <div class="total fl">共&nbsp;43&nbsp;条</div>
          <slot name="account" />
        </div>
        <div class="right-group">
          <div
            v-for="(item, index) in footerConfig.filter(item => item.isShow == null || item.isShow(this))"
            :key="`${footerkey}${item.name}${index}`"
            class="inline-block">
            <el-dropdown
              v-if="item.isDropdown"
              class="ml10"
              size="small"
              split-button
              type="primary"
              @command="footerMenuHandler"
            >
              {{ item.name }}
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item
                  v-for="(menu, subIndex) in item.menus.filter(menu=> menu.isShow(soDetails))"
                  :key="`${menu.name}_${subIndex}`"
                  :command="menu"
                >{{ menu.name }}</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
            <el-upload
              v-else-if="item.upload"
              ref="fieldUpload"
              class="upload-demo ml10 inline-block"
              :headers="uploadHeaders"
              :action="item.upload(item).action"
              :data="item.upload(item).data"
              :auto-upload="item.upload(item).isAutoUpload"
              :show-file-list="false"
              :on-change="importHandler"
              :before-upload="(file) => { return beforeUpload(file, item.upload(item).fileType, item.upload(item).fileSize) }"
              :on-success="uploadSuccess"
              :on-error="uploadError"
            >
              <el-button size="small" type="primary">{{ item.name }}</el-button>
            </el-upload>
            <el-button
              v-else
              class="ml10"
              v-preventReClick
              :type="item.type || ''"
              size="small"
              @click.stop="controlHandler(item)"
            >{{ item.name }}</el-button>
          </div>
        </div>
      </div>
    </div>
    <!-- 穿梭框 -->
<!--    <ShuttleFrame-->
<!--      v-if="shuttleFrameVisible"-->
<!--      :visible="shuttleFrameVisible"-->
<!--      :source="source"-->
<!--      :title="sfTitle"-->
<!--      :source-title="sourceTitle"-->
<!--      :target-title="targetTitle"-->
<!--      button-text="保存"-->
<!--      @onConfirm="shuttleFrameSave"-->
<!--      @onClose="shuttleFrameClose"-->
<!--    />-->
    <!-- 对话框 -->
    <Dialog
      v-if="dialogVisible"
      :dialog-title="dialogTitle"
      :dialog-desc="dialogDesc"
      :dialog-visible="dialogVisible"
      :loading="isLoading"
      @dialogConfirmHandle="dialogConfirmHandle"
      @dialogCancelHandle="dialogCancelHandle"
    />
<!--    <slot name="dialog" />-->
  </div>
</template>
<script>
// import { mapGetters } from 'vuex';
import { TabList } from './models.js';
// import ExtHotTable from '@/layout/components/common/exthottable/ExtHotTable.vue';
// import ShuttleFrame from '@/layout/components/common/ShuttleFrame.vue';
import Dialog from '@/layout/components/common/Dialog.vue';
// import { headers } from '../../soItem/soItem.edit/itemConfig.js';
// import dictArray from '@/models.v2/utils/dictArray'
import {SO} from './models.js'
import {
  titleConfig,
  actionConfig,
  footerConfig,
  editConfig,
  editConfigV2,
  selectConfig
} from './config.js';
import indexFunc from './index.js';
export default {
  name: 'formeidt',
  components: {
    Dialog
  },
  data() {
    return {
      editable: true,
      soDetails: new SO(), // 销售订单详情
      originLines: [],
      id: '',
      tabsList: new TabList().tabs, // tabList
      activeName: 'Details', // Tab
      footerkey: 1,
      hottableRefreshkey: 1,
      isLoading: false,

      contextMenuItems: [],
      contextMenuItemsConfig: [],
      collapseList: [
        {
          title: '基本信息',
          name: 'base'
        },
        {
          title: '销售订单明细',
          name: 'items'
        },
        {
          title: '其他信息',
          name: 'other'
        }
      ],
      activeCollapse: ['base', 'items', 'other'], // 折叠面板

      // customerList: DictArray.$([]),
      titleConfig,
      footerConfig,
      actionConfig, // 操作配置
      editConfig,
      editConfigV2,
      selectConfig,

      // 穿梭框
      source: [], // 当前模型所有字段
      sfTitle: '字段配置',
      sourceTitle: '隐藏字段',
      targetTitle: '显示字段',

      shuttleFrameVisible: false,
      // 对话框
      dialogVisible: false,
      dialogTitle:"确认",
      dialogType: '',
      dialogDesc: '',
      // 键盘事件
      addressEdit: false, // tab事件判断条件
      tabObj: { field: '', type: '', index: '' },
      sidebarSwitch: true, // 侧边栏状态
      // 上传
      action: (actionName) => {
        return this[actionName];
      },
      // uploadHeaders: {
      //   Authorization: `Bearer ${this.$keycloak.token}`,
      //   // userName: `${this.$keycloak.userName}`
      // },
      // 上传图片
      previewImgDialogVisible: false,
      previewImgUrl: '',
    };
  },
  computed: {
  },
  watch: {
    sidebar: {
      handler: function(val, oldVal) {
        this.sidebarSwitch = val.opened;
        console.log(this.sidebarSwitch, '侧边栏开关');
      },
      deep: true
    }
  },
  async mounted() {
  },
  // beforeDestroy() {
  //   window.removeEventListener('scroll', this.roll);
  // },
  destroyed() {

  },
  methods: indexFunc
};
</script>

<style lang="scss" scoped>
.app-container {
  padding: 15px 0 0 0;
}
</style>

